<template>
  <div class="big-customer-list">
      <BaseFilter class="base-filter" :config="filterOptions" @mychange="(value) => setFilterData('base', value)" />
      <BaseFilter class="area-filter" :config="getAreaOptions()" @mychange="(value) => setFilterData('area', value)" />
      <div class="table-wrapper">
        <BaseTable :columns="tableColumns" :tableData="getTableData()">
            <template #header>
                <div class="header-btn">
                    <el-button type="primary">重置</el-button>
                    <el-button type="primary">查询</el-button>
                </div>
            </template>
        </BaseTable>
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import BaseTable from "@/components/BaseTable.vue";
import { cityOptionsData } from "../../config/city";
import { getAllKeyAccounts, setAccountsStatus } from "@/api/bigCustomer";

import moment from "moment";
export default {
    name: "bigcustomerlist",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "姓名",
                    key: "contactsName",
                    type: "text",
                    props: {
                        placeholder: "联系人姓名"
                    },
                },
                {
                    label: "手机号",
                    key: "phone",
                    type: "text",
                    props: {
                        placeholder: "联系人手机号查询"
                    },
                },
                {
                    label: "大客户行业",
                    key: "industry",
                    type: "select",
                    options: [{
                        label: "建筑业",
                        value: "建筑业"
                    },
                    {
                        label: "畜牧业",
                        value: "畜牧业"
                    },
                    {
                        label: "金融业",
                        value: "金融业"
                    }]
                },
                {
                    label: "单位",
                    key: "Company",
                    type: "text",
                    props: {
                        placeholder: "单位查询"
                    },
                },
            ],
            areaOptions: [
                {
                    label: "选择省份",
                    key: "province",
                    type: "select",
                    props: {
                        placeholder: "选择省份"
                    },
                    options: cityOptionsData
                },
                {
                    label: "选择市",
                    key: "city",
                    type: "select",
                    props: {
                        placeholder: "选择市"
                    },
                    options: []
                },
                {
                    label: "选择区",
                    key: "area",
                    type: "select",
                    props: {
                        placeholder: "选择区域"
                    },
                    options: []
                }
            ],
            filterData: {},
            tableColumns: [
                {
                    title: "ID",
                    key: "id",
                },
                {
                    title: "联系人",
                    key: "contactsName",
                },
                {
                    title: "手机号",
                    key: "phone",
                },
                {
                    title: "开通时间",
                    key: "timer",
                },
                {
                    title: "代理人",
                    key: "Sales_name",
                },
                {
                    title: "联系电话",
                    key: "sales_calls",
                },
                {
                    title: "省",
                    key: "province",
                },
                {
                    title: "市",
                    key: "city",
                },
                {
                    title: "区",
                    key: "area",
                },
                {
                    title: "账号状态",
                    key: "Account_status",
                    operate: [{
                        tag: "el-switch",
                        change: (index, row) => {
                            if(row._id){
                                setAccountsStatus(row._id).then(res => {
                                    if(res.code === 200){
                                        this.getAllKeyAccounts()
                                        this.$message.success("切换状态成功");
                                    }
                                }).catch(err => {
                                    this.$message.error("切换状态失败")
                                })
                            }
                        }
                    }]
                },
                {
                    title: "操作",
                    key: "operate",
                    operate: [
                        {
                            tag: "el-button",
                            text: "详情",
                            props: {
                                type: "primary",
                                click: (index, row) => {
                                    // TODO： 显示详情
                                }
                            }
                        }
                    ]
                }
            ],
            tableData: [],
        }
    },
    methods: {
        setFilterData(key, values){
            this.filterData = {
                ...this.filterData,
                [key]: values
            };
        },
        getAreaOptions(){
            const { province, city } = this.filterData || {};
            let cityList = [];
            return this.areaOptions.map(item => {
                switch(item.key){
                    case "city":
                        cityList = (province ? cityOptionsData.find(item => item.value === province)?.children : []) || []
                        return {
                            ...item,
                            options: cityList,
                            props: {
                                ...item.props,
                                disabled: cityList.length === 0
                            }
                        }
                    case "area":
                        const areaList = ((city && cityList) ? cityList.find(item => item.value === city)?.children : []) || [];
                        return {
                            ...item,
                            options: areaList,
                            props: {
                                ...item.props,
                                disabled:  areaList.length === 0
                            }
                        }
                    default:
                        return item;
                }
            })
        },
        getAllKeyAccounts(){
            getAllKeyAccounts().then(res => {
            if(res.code === 200){
                this.tableData = res?.data?.map((item, index) => {
                    return {
                        ...item,
                        id: index + 1,
                        timer: item?.timer ? moment(item?.timer).format("YYYY-MM-DD HH:mm:ss") : moment().format("YYYY-MM-DD HH:mm:ss")
                    }
                }) || [];
            } else {
                this.$message.error("加载数据失败");
            }
        })
        },
        getTableData(){
            let data = this.tableData;
            if(this.filterData.base){
                const base = this.filterData.base;
                const keys = Object.keys(base);
                for(let idx = 0; idx < keys.length; idx++){
                    let key = keys[idx];
                    if(!base?.[key]) continue;
                    data = data.filter(item => item?.[key].includes(base[key]));
                    
                }
                return data;
            }
            return data;
        }
    },
    mounted(){
        this.getAllKeyAccounts();
    }
}
</script>

<style lang="scss">
.big-customer-list {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .area-filter {
        margin-top: 20px;
    }
}
</style>